import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marquee_widget/marquee_widget.dart';

import 'index.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          _buildLogo(),
          const SizedBox(
            height: 16,
          ),
          const SizedBox(
            height: 16,
          ),
          _buildNotice(),
          const SizedBox(
            height: 16,
          ),
          _buildName(),
          const SizedBox(
            height: 16,
          ),
          _buildPassword(),
          const SizedBox(
            height: 16,
          ),
          _buildLoginButton(),
          const SizedBox(
            height: 16,
          ),
          _buildRegisterButton(),
        ],
      ),
    );
  }

  _buildRegisterButton() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('还没有账号？'),
        TextButton(
          onPressed: () {},
          child: const Text('去注册'),
        )
      ],
    );
  }

  // 按钮
  Widget _buildLoginButton() {
    return GetBuilder<LoginController>(
      builder: (_) => ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: const Size.fromHeight(50),
          // 圆角
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        ),
        // 按钮内容
        child: const Text(
          '登录',
          style: TextStyle(
            fontSize: 16,
          ),
        ),
        onPressed: () {
          controller.onTap();
        },
      ),
    );
  }

  // 输入框 - 密码
  Widget _buildPassword() {
    return GetBuilder<LoginController>(
      builder: (_) => TextField(
        controller: controller.passwordcontrol,
        // 密码显示
        obscureText: true,
        // 焦点管理
        // focusNode: focusNodePassword,
        // 输入框的样式
        decoration: const InputDecoration(
          labelText: '密码',
          hintText: '请输入',
          prefixIcon: Icon(Icons.lock),
          border: OutlineInputBorder(),
          contentPadding: EdgeInsets.all(10),
        ),
      ),
    );
  }

  // 输入框 - 用户名
  Widget _buildName() {
    return GetBuilder<LoginController>(
      builder: (_) => TextField(
        // 控制器
        controller: controller.usernamecontrol,

        // 焦点
        // autofocus: true,
        // 焦点管理
        // focusNode: focusNodeName,
        // 输入框的样式
        decoration: const InputDecoration(
          labelText: '用户名',
          hintText: '请输入用户名',
          prefixIcon: Icon(Icons.person),
          border: OutlineInputBorder(),
          contentPadding: EdgeInsets.all(10),
        ),
      ),
    );
  }

  Row _buildNotice() {
    return Row(
      children: [
        Expanded(
            child: Marquee(
          child: GetBuilder<LoginController>(
            builder: (_) => Text(
              controller.notice,
              style: const TextStyle(
                color: Colors.red,
              ),
            ),
          ),
        )),
      ],
    );
  }

  Widget _buildLogo() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          'assets/images/logo.png',
          height: 64,
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      init: LoginController(),
      id: "login",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("登录"),
          ),
          body: SafeArea(
            child: ListView(
              children: [_buildView()],
            ),
          ),
        );
      },
    );
  }
}
